<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
	<div class="container-fluid">
		<div class="card">
			<div class="card-body">
				<div id="toolbar" style="width: 80vw;">
					<div class="mt-2">
						<button class="btn btn-primary me-1" data-handle="add" data-perm="permission/add" hidden><i class="mdi mdi-plus"></i>
							新增</button>
					</div>
				</div>
				<table id="table"></table>
			</div>
		</div>
	</div>
	<script id="dialog" type="text/html">
		<form class="needs-validation" novalidate  id="dialogForm">
			<input type="text" name="id" hidden>
		  <div class="row mb-3 form-item">
		    <label for="type" class="col-sm-2 col-form-label text-end required">类型</label>
		    <div class="col-sm-10">
		      <select class="form-control selectpicker" name="type">
				  	<option value="01">目录</option>
					<option value="02">菜单</option>
					<option value="03">按钮</option>
			  </select>
		    </div>
		  </div>
		  <div class="row mb-3 form-item">
		    <label for="catalog" class="col-sm-2 col-form-label text-end required">目录</label>
		    <div class="col-sm-10">
		      <select class="form-control selectpicker" name="catalog"></select>
		    </div>
		  </div>
		  <div class="row mb-3 form-item">
		    <label for="menu" class="col-sm-2 col-form-label text-end required">菜单</label>
		    <div class="col-sm-10">
		      <select class="form-control selectpicker" name="menu"></select>
		    </div>
		  </div>
		  <div class="row mb-3 form-item">
		    <label for="title" class="col-sm-2 col-form-label text-end required">名称</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="title" required>
		    </div>
		  </div>
		  <div class="row mb-3 form-item">
		    <label for="url" class="col-sm-2 col-form-label text-end required">路径</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="url" >
		    </div>
		  </div>
		  <div class="row mb-3 form-item">
		    <label for="orders" class="col-sm-2 col-form-label text-end">排序</label>
		    <div class="col-sm-10">
		      <input type="number" class="form-control" name="orders" value="1">
		    </div>
		  </div>
		  <div class="row mb-3 form-item">
		    <label for="icon" class="col-sm-2 col-form-label text-end">图标</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="icon">
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="description" class="col-sm-2 col-form-label text-end">描述</label>
		    <div class="col-sm-10">
			  <textarea class="form-control" name="description" rows="3"></textarea>
		    </div>
		  </div>
		  <div class="row ">
			 <div class="col-md-4 offset-md-8">
				<button type="button" class="btn btn-secondary me-1 " data-bs-dismiss="modal">取消</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>
		  </div>
		</form>
	</script>
	<script type="module">
		import admin from "/admin/js/admin.js"
		var layer = admin.getModule("layer");
		var request = admin.getModule("request");
		var button = admin.getModule("button");
		var form = admin.getModule("form");
		var table = admin.getModule("table");

		var dialogHtml = $("#dialog").html();
		var dialogData = {
			handle: '',
			dialog: null,
		};
		var tableData = [];
		var $table = $("#table")

		var tableInst = $table.bootstrapTable(table.initOption({
			url: 'permission/list',// 请求地址
			showRefresh: false,
			pagination: false,
			singleSelect: true,
			columns: [{
				checkbox: true
			}, {
				field: 'title',
				title: '功能名称'
			}, {
				field: 'type',
				title: '类型',
				formatter: typeFormatter
			}, {
				field: 'url',
				title: '路径',
			}, {
				field: 'description',
				title: '描述',
			}, {
				field: 'orders',
				title: '排序',
			}, {
				field: 'icon',
				title: '图标',
			}, {
				formatter: btnGroup,
				title: "操作",
				events: {
					'click .edit-btn': edit,
					'click .del-btn': deleteHandle
				}
			}],
			idField: 'id',
			treeShowField: 'title',
			parentIdField: 'pid',
			rootParentId: '0',
			onLoadSuccess: function (data) {
				tableData = data.data;
			},
			onPostBody: function (data) {
				var columns = $table.bootstrapTable('getOptions').columns
				if (columns && columns[0][1].visible) {
					$table.treegrid({
						initialState: 'collapsed',// 所有节点都折叠
						// initialState: 'expanded',// 所有节点都展开，默认展开
						treeColumn: 1,
						// expanderExpandedClass: 'bi bi-caret-down-fill',  //图标样式
						//expanderCollapsedClass: 'bi bi-caret-right-fill',
						onChange: function () {
							$table.bootstrapTable('resetView')
						}
					})
				}
				//只展开树形的第一级节点
				$($table.treegrid('getRootNodes')[0]).treegrid('expand');
			},
		}))

		$('[data-handle="add"]').click(function () {
			add();
		})


		function add() {
			dialogData.handle = "permission/add";
			dialogData.dialog = layer.dialog("添加资源", dialogHtml);
			dialogEvent();
			var curPerData = $("#table").bootstrapTable("getSelections")[0];
			if (curPerData) {
				if (curPerData.type == '01') {
					customShow('02')
					initType('02');
					initCatalog(curPerData.id)
				} else if (curPerData.type == '02') {
					customShow('03')
					initType('03');
					initCatalog(curPerData.pid)
					initMenu(curPerData.id);
				} else if (curPerData.type == '03') {
					customShow('03')
					initType('03');
					tableData.forEach(function (item) {
						if(item.id == curPerData.pid){
							initCatalog(item.pid)
							initMenu(item.id);
						}
					})
				}
			} else {
				customShow('01')
				initType('01');
			}

		}

		function edit(e, value, row, index) {
			dialogData.handle = "permission/edit";
			dialogData.dialog = layer.dialog('修改资源', dialogHtml);
			dialogEvent();
			form.val("#dialogForm", row)
			$("#dialogForm [name='type']").prop("disabled", true)
			initType(row.type);
			customShow(row.type)
			if (row.type == "02") {
				$("#dialogForm [name='catalog']").prop("disabled", true)
				initCatalog(row.pid)
			} else if (row.type == "03") {
				tableData.forEach(function (item) {
					if (item.id == row.pid) {
						$("#dialogForm [name='catalog']").prop("disabled", true)
						initCatalog(item.pid)
						$("#dialogForm [name='menu']").prop("disabled", true)
						initMenu(row.pid, item.pid);

					}
				})
			}

		}

		function deleteHandle(e, value, row, index) {
			layer.confirm("确认删除资源" + row.title, function () {
				request.postAlert("permission/delete", {id: row.id}).then(res => {
					tableInst.bootstrapTable("refresh");
				})
			})
		}

		function dialogEvent() {
			$("#dialogForm [name='type']").change(function () {
				customShow($(this).val());
				initCatalog()
				$("#dialogForm [name='catalog'").change()
			})
			$("#dialogForm [name='catalog']").change(function () {
				initMenu();
			})
			$("#dialogForm").submit(function () {
				var btn = button.load({elem: "#dialogForm button[type='submit']"});
				if (!form.validate($(this))) {
					btn.stop();
					return false;
				}
				var data = form.val($(this));
				if (data.type == '01') {
					data.pid = '0'
				} else if (data.type == '02') {
					data.pid = data.catalog
				} else if (data.type == '03') {
					data.pid = data.menu
				}
				data.roleIds = $("#roleIds").selectpicker('val');
				request.postAlert(dialogData.handle, data).then(res => {
					dialogData.dialog.hide();
					tableInst.bootstrapTable("refresh");
				}).catch(err => {
					btn.stop();
				})
				return false;
			})
		}



		function typeFormatter(value, row, index) {
			switch (row.type) {
				case "01":
					return "主菜单";
				case "02":
					return "子菜单";
				case "03":
					return "按钮";
				default:
					return "";
			}
		}
		// 自定义操作按钮
		function btnGroup() {
			let html =
				'<a href="#!" class="btn btn-sm btn-default me-1 edit-btn"  title="编辑" data-perm="permission/edit" hidden><i class="mdi mdi-pencil"></i></a>' +
				'<a href="#!" class="btn btn-sm btn-default del-btn"   title="删除" data-perm="permission/delete" hidden><i class="mdi mdi-trash-can-outline"></i></a>';
			return html;
		}

		function customShow(type) {
			switch (type) {
				case "01": {
					$("#dialogForm [name='catalog']").parents(".form-item").hide();
					$("#dialogForm [name='menu']").parents(".form-item").hide();
				}
					break;
				case "02": {
					$("#dialogForm [name='catalog']").parents(".form-item").show();
					$("#dialogForm [name='menu']").parents(".form-item").hide();
					$("#dialogForm [name='icon']").parents(".form-item").hide();
				}
					break;
				case "03": {
					$("#dialogForm [name='catalog']").parents(".form-item").show();
					$("#dialogForm [name='menu']").parents(".form-item").show();
					$("#dialogForm [name='icon']").parents(".form-item").hide();
				}
					break;
			}

		}

		function initType(data) {
			var $select = $("#dialogForm [name='type'");
			$select.selectpicker('val', data);
		}

		function initCatalog(data) {
			var $select = $("#dialogForm [name='catalog'");
			var html = ""
			$select.selectpicker('destroy');
			tableData.forEach(function (item) {
				if (item.type == "01") {
					html += '<option value="' + item.id + '">' + item.title + '</option>'
				}
			})
			$select.html(html);
			$select.val(data);
			$select.selectpicker('render');
		}

		function initMenu(data, menuId) {
			var $select = $("#dialogForm [name='menu'");
			var value = menuId || form.val("#dialogForm").catalog;
			var html = '';
			$select.selectpicker('destroy');
			tableData.forEach(function (item) {
				if (item.pid == value) {
					html += '<option value="' + item.id + '">' + item.title + '</option>'
				}
			})
			$select.html(html);
			$select.val(data);
			$select.selectpicker('render');
		}

	</script>
</body>

</html>